"use client"

import {useState} from "react"
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
import {PasswordLoginForm} from "@/components/password-login-form"
import {PhoneLoginForm} from "@/components/phone-login-form"

export default function LoginPage() {
    const [activeTab, setActiveTab] = useState("password")

    return (
        <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
            <div className="w-full max-w-md space-y-8">
                <div className="text-center">
                    <h1 className="text-3xl font-bold">欢迎登录</h1>
                    <p className="mt-2 text-sm text-gray-600">请选择登录方式</p>
                </div>

                <Tabs defaultValue="password" value={activeTab} onValueChange={setActiveTab} className="w-full">
                    <TabsList className="grid w-full grid-cols-2">
                        <TabsTrigger value="password">账号密码</TabsTrigger>
                        <TabsTrigger value="phone">手机验证码</TabsTrigger>
                    </TabsList>
                    <TabsContent value="password">
                        <PasswordLoginForm/>
                    </TabsContent>
                    <TabsContent value="phone">
                        <PhoneLoginForm/>
                    </TabsContent>
                </Tabs>

                <div className="mt-6 text-center text-sm">
                    <p className="text-gray-600">
                        还没有账号？{" "}
                        <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
                            立即注册
                        </a>
                    </p>
                </div>
            </div>
        </div>
    )
}
